<script>
export default {
  name: "FormView",
  data() {
    return {
      labelPosition: 'left',
      form: {
        name: "",
        password: ""
      },
      rules: {
        name: [
            /*
            * required  必填项 设置
            * message 提示信息
            * trigger 触发时机    blur  失去焦点
            * */
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 8, message: '长度在 3 到 8 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{
    onSubmit(){
      //  获取组件中所有含有ref属性的标签对象
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.$message.success(JSON.stringify(this.form))
        } else {
          this.$message.error('请填写表单数据')
          return false;
        }
      });

    }
  }
}
</script>

<template>
  <div>
    <!--
       label-position  改变表单域标签的位置
       model  模型     双向数据绑定     v-model
    -->
    <div id="container">
      <h1>登录</h1>
      <el-form :label-position="labelPosition" label-width="80px" :model="form"  :rules="rules" ref="loginForm">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<style scoped>
#container {
  /*宽度*/
  width: 400px;
  /*高度*/
  height: 350px;
  /*盒子阴影*/
  box-shadow: 0 0 10px #ccc;
  /*外边距  水平居中*/
  margin: 0 auto;
  /*内边距占据盒子内部空间 不在扩大盒子的宽高*/
  box-sizing: border-box;
  /*上内边距 20px*/
  padding: 20px;
  border-radius: 20px;
  text-align: left;
}

h1 {
  color: #42b983;
  text-align: center;
}
</style>